<template>
	<!--开始考试  考试信息 -->
	<view class="start">
		<uni-row class="demo-uni-row" :gutter="20">
			<uni-col :span="7">
				<view class="label">考试题目</view>
			</uni-col>
			<uni-col :span="16">
				<view class="detail">{{ detail.name }}</view>
			</uni-col>
			<uni-col :span="7">
				<view class="label">考题总分</view>
			</uni-col>
			<uni-col :span="16">
				<view class="detail">共<text class="number">{{ detail.pass }}分</text></view>
			</uni-col>
			<uni-col :span="7">
				<view class="label">考试时间</view>
			</uni-col>
			<uni-col :span="16">
				<view class="detail">共<text class="number">{{ detail.duration }}分钟</text></view>
			</uni-col>
			<uni-col :span="7">
				<view class="label">考试课程</view>
			</uni-col>
			<uni-col :span="16">
				<view class="detail">
					<view v-for="(item,index) in detail.course_name_list">{{ item }}</view>
					<!-- <view>多选<text class="number">{{ 5 }}</text>道，每道<text class="number">{{ 20 }}</text>分</view> -->
					<!-- <view>多选<text class="number">{{ 5 }}</text>道，每道<text class="number">{{ 20 }}</text>分</view> -->
				</view>
			</uni-col>
			<!-- 			<uni-col :span="7">
				<view class="label">考试规则</view>
			</uni-col>
			<uni-col :span="16">
				<view class="detail">
					<view>答题时间内作答完毕可点击提交，答题时间已到但未手动提交的，系统将自动提交</view>
				</view>
			</uni-col> -->
		</uni-row>
		<button @click="toTopic" :disabled="!flag" :class="flag ? 'btn' :'disabled'">开始答题</button>
		<view v-if="!flag" style="color: red; font-size: 14px;text-align: center;line-height: 60rpx;">{{tips}}</view>
	</view>
</template>

<script>
	import {
		getone
	} from '@/api/exam.js'
	import {mixin} from '@/static/mixin.js'
	export default {
		mixins:[mixin],
		onLoad: function(option) {
			let that = this;
			getone({
				id: option.id
			}).then(res => {
				console.log(res);
				that.detail = res;
				if(res.have_learn_time >= res.min_progress){
					if(res.is_pass==1){
						that.flag = false
						that.tips = '您已通过该考试'
					}else{
						that.flag = true
					}
				}else{
					that.flag = false
				}
			})
		},
		
		data() {
			return {
				detail: {},
				flag:false,
				tips:'项目中的课程学习的总课时未达到考试要求'
			}
		},
		methods: {
			toTopic() {
				console.log("时长",this.detail.duration);
				uni.navigateTo({
					url: `/pages/exam/topic/index?id=${this.detail.id}&duration=${this.detail.duration}`
				})
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style scoped lang="scss">
	.disabled{
		margin-top: 30px;
		width: 50%;
		color: white;
		background-color: #ccc;
	}
	.number {
		display: inline-block;
		margin-left: 5px;
		margin-right: 5px;
		color: #2aae67;
	}

	.start {
		font-size: 19px;
		padding: 30px;
		padding-top: 10px;

		.label {
			color: $uni-text-color-grey;
			margin-top: 20px;
		}

		.btn{
			margin-top: 30px;
			width: 50%;
			color: white;
			background-color: $uni-color-primary;
		}
	}

	.detail {
		margin-top: 20px;
	}

	.renking {
		position: fixed;
		right: 30px;
		margin-top: 20px;
		height: 50px;
		width: 70px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;

		image {
			width: 100%;
			height: 100%;
		}

		text {
			color: $uni-text-color;
			font-size: 16px;
		}
	}
</style>
